/**
 * @description 绑定快捷键
 * */
import { useKeyPress } from "ahooks";
import { useDispatch } from "react-redux";
import { ActionCreators as UndoActionCreators } from "redux-undo";
import {
  copySelectedComponent,
  pasteCopiedComponent,
  removeSelectedComponent,
  selectedNextComponent,
  selectedPrevComponent,
} from "../store/componentsReducer";
/**
 * 判断 activeElem 是否合法
 */
function isActiveElementValid() {
  const activeElem = document.activeElement;

  // // 没有增加 dnd-kit 之前
  // if (activeElem === document.body) return true // 光标没有 focus 到 input

  // 增加了 dnd-kit 以后
  if (activeElem?.matches('div[role="button"]')) return true;
  if (activeElem === document.body) return true;
  return false;
}
function useBindCanvasKeyPress() {
  const dispatch = useDispatch();
  //删除组件
  useKeyPress(["backspace", "delete"], () => {
    if (!isActiveElementValid()) return false;
    dispatch(removeSelectedComponent());
  });
  //复制
  useKeyPress(["ctrl.c", "meta.c"], () => {
    if (!isActiveElementValid()) return false;
    dispatch(copySelectedComponent());
  });
  //粘贴
  useKeyPress(["ctrl.v", "meta.v"], () => {
    if (!isActiveElementValid()) return false;
    dispatch(pasteCopiedComponent());
  });

  //选中上一个组件
  useKeyPress("uparrow", () => {
    if (!isActiveElementValid()) return false;
    dispatch(selectedPrevComponent());
  });
  //选中下一个
  useKeyPress("downarrow", () => {
    if (!isActiveElementValid()) return false;
    dispatch(selectedNextComponent());
  });
  // 撤销
  useKeyPress(
    ["ctrl.z", "meta.z"],
    () => {
      if (!isActiveElementValid()) return;
      dispatch(UndoActionCreators.undo());
    },
    {
      exactMatch: true, // 严格匹配
    }
  );
  // 重做
  useKeyPress(
    ["ctrl.shift.z", "meta.shift.z"],
    () => {
      if (!isActiveElementValid()) return;
      dispatch(UndoActionCreators.redo());
    },
    {
      exactMatch: true, // 严格匹配
    }
  );
}
export default useBindCanvasKeyPress;
